<nz-card [nzBordered]="false">
  <form nz-form se-container="1" size="compact" gutter="32" [labelWidth]="null">
    <!-- 所属类目 -->
    <se label="{{ 'belong.category' | translate }}" line>
      <tag-select>
        <nz-tag
          *ngFor="let i of categories; let idx = index"
          nzMode="checkable"
          [nzChecked]="i.value"
          (nzCheckedChange)="changeCategory($event, idx)"
        >
          {{ i.text }}
        </nz-tag>
      </tag-select>
    </se>
    <!-- 其它选项 -->
    <se label="{{ 'other.options' | translate }}">
      <div class="ant-form ant-form-inline">
        <nz-form-item>
          <!-- 作者 -->
          <nz-form-label nzFor="rate">{{ 'author' | translate }}</nz-form-label>
          <nz-form-control>
            <!-- 不限 -->
            <nz-select
              [(ngModel)]="q.user"
              name="user"
              [nzPlaceHolder]="'{{ 'no.limit' | translate }}'"
              [nzShowSearch]="true"
              style="width: 100px;"
            >
              <!-- 李三 -->
              <nz-option [nzLabel]="'{{ 'lee.san' | translate }}'" [nzValue]="'lisa'"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <!-- 好评度 -->
          <nz-form-label nzFor="rate">{{ 'aavorable.rating' | translate }}</nz-form-label>
          <nz-form-control>
            <nz-select
              [(ngModel)]="q.rate"
              name="rate"
              [nzPlaceHolder]="'{{ 'no.limit' | translate }}'"
              [nzShowSearch]="true"
              style="width: 100px;"
            >
              <!-- 优秀 -->
              <nz-option [nzLabel]="'{{ 'good' | translate }}'" [nzValue]="'good'"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </se>
  </form>
</nz-card>
<nz-list
  [nzLoading]="loading"
  [nzDataSource]="list"
  [nzRenderItem]="item"
  [nzGrid]="{ gutter: 24, xl: 6, lg: 8, md: 8, sm: 12, xs: 24 }"
>
  <ng-template #item let-item>
    <nz-list-item>
      <nz-card nzHoverable [nzActions]="[op1, op2, op3, op4]">
        <ng-template #op1>
          <!--  下载-->
          <nz-tooltip [nzTitle]="'{{ 'pm.project.archives.file.down.load' | translate }}'">
            <i nz-tooltip nz-icon type="download"></i>
          </nz-tooltip>
        </ng-template>
        <ng-template #op2>
          <!--  编辑-->
          <nz-tooltip [nzTitle]="'{{ 'edit' | translate }}'">
            <i nz-tooltip nz-icon type="edit"></i>
          </nz-tooltip>
        </ng-template>
        <ng-template #op3>
          <!-- 分享 -->
          <nz-tooltip [nzTitle]="'{{ 'share' | translate }}'">
            <i nz-tooltip nz-icon type="share-alt"></i>
          </nz-tooltip>
        </ng-template>
        <ng-template #op4>
          <nz-dropdown [nzPlacement]="'bottomLeft'">
            <i nz-dropdown nz-icon type="ellipsis"></i>
            <ul nz-menu>
              <li nz-menu-item>1st menu item</li>
              <li nz-menu-item>2st menu item</li>
              <li nz-menu-item>3st menu item</li>
            </ul>
          </nz-dropdown>
        </ng-template>
        <nz-card-meta [nzTitle]="item.title" [nzAvatar]="nzAvatar">
          <ng-template #nzAvatar>
            <nz-avatar nzSize="small" [nzSrc]="item.avatar"></nz-avatar>
          </ng-template>
        </nz-card-meta>
        <div class="card-info d-flex">
          <div>
            <!-- 活跃用户 -->
            <p>{{ 'active.users' | translate }}</p>
            <p>
              {{ item.activeUser }}
              <em class="wan">万</em>
            </p>
          </div>
          <div>
            <!-- 新增用户 -->
            <p>{{ 'new.users' | translate }}</p>
            <p>{{ item.newUser | number: '3.' }}</p>
          </div>
        </div>
      </nz-card>
    </nz-list-item>
  </ng-template>
</nz-list>
